<template>
    <div class="white-box">
        <title-more title="首单立减设置" />
        <pub-panel title="是否开启首单立减" tip="启用后，新用户购买商品首单下单时可享受对应的首单减免部分金额" bottom="20px">
            <template #right>
                <el-switch
                    v-model="switch_one"
                    width="72px"
                    size="large"
                    inline-prompt
                    active-text="已开启"
                    inactive-text="已关闭"
                    @change="(val) => changeSwitchPanel(val, 1)"
                />
            </template>
        </pub-panel>
        <pub-panel title="开启首单立减是否支持优惠券" tip="开启后，会员首次下单既可享受首单立减也可享受优惠券" bottom="20px">
            <template #right>
                <el-switch
                    v-model="switch_two"
                    width="72px"
                    size="large"
                    inline-prompt
                    active-text="已开启"
                    inactive-text="已关闭"
                    @change="(val) => changeSwitchPanel(val, 2)"
                />
            </template>
        </pub-panel>
        <div class="task-one">
            <div class="task-one__item">
                <span class="task-one__label">首单立减金额：</span>
                <div>
                    <el-input v-model.trim="price" class="task-input" oninput="value=value.replace(/[^\d]/g,'')" clearable placeholder="请输入金额" />
                    <span>元</span>
                    <!-- <span style="margin: 0px 8px">或</span> -->
                    <!-- <el-input
                        v-model.trim="percent"
                        class="task-input"
                        oninput="value=value.replace(/[^\d.]/g,'')"
                        clearable
                        placeholder="请输入百分比"
                    />
                    <span>%</span> -->
                    <p class="input-tips">新用户购买商品首单下单时可减免的金额</p>
                </div>
            </div>

            <div class="task-one__btn task-wrap-btn clearfix" style="padding-left: 98px; margin-top: 10px">
                <el-button type="primary" :loading="form_loading" @click="handleConfirm">保存</el-button>
            </div>
        </div>
    </div>
    <go-back />
</template>

<script setup>
import { getCurrentInstance, ref, onMounted } from "vue"
import GoBack from "@components/GoBack.vue"
import TitleMore from "@components/title-more.vue"
import PubPanel from "@components/PubPanel.vue"

const { proxy } = getCurrentInstance()

onMounted(() => {
    getConfig()
})

// 获取配置
const switch_one = ref(false) // 是否开启
const switch_two = ref(false) // 是否开启首单立减且支持优惠券
function getConfig() {
    proxy.$axios
        .get("ump/reward/first", {
            params: {
                action: "config",
            },
        })
        .then((res) => {
            if (res.data.code == 0) {
                let result = res.data.data
                switch_one.value = result.first == 0 ? false : true
                switch_two.value = result.first_coupon == 0 ? false : true
                getDetail()
            } else {
                proxy.$message({message:res.data.msg,type:"error"})
            }
        })
        .catch((err) => {})
}
// 设置配置
const changeSwitchPanel = (val, type) => {
    proxy.$axios
        .get("ump/reward/first", {
            params: {
                action: "config_set",
                field: type == 1 ? "first" : "first_coupon", // first首单立减，first_coupon首单立减是否支持优惠券
                field_val: val ? 1 : 0,
            },
        })
        .then((res) => {
            if (res.data.code == 0) {
                proxy.$message({ message: "设置成功", type: "success" })
            } else {
                proxy.$message({message:res.data.msg,type:"error"})
            }
        })
        .catch((err) => {})
}

// 详情
const price = ref("")
function getDetail() {
    proxy.$axios
        .get("ump/reward/first", {
            params: {
                action: "index",
            },
        })
        .then((res) => {
            if (res.data.code == 0) {
                let result = res.data.data
                price.value = result.first_amount
            } else {
                proxy.$message({message:res.data.msg,type:"error"})
            }
        })
        .catch((err) => {})
}

// 保存
const form_loading = ref(false)
const handleConfirm = () => {
    let regs = /^\d+(\.\d{1,2})?$/
    if (!price.value || !regs.test(price.value)) {
        proxy.$message({ message: "金额格式有误！", type: "warning" })
        return
    }
    form_loading.value = true
    proxy.$axios
        .get("ump/reward/first", {
            params: {
                action: "update",
                first_amount: price.value,
            },
        })
        .then((res) => {
            form_loading.value = false
            if (res.data.code == 0) {
                proxy.$message({ message: "保存成功！", type: "success" })
            } else {
                proxy.$message({message:res.data.msg,type:"error"})
            }
        })
        .catch((err) => {
            form_loading.value = false
        })
}
</script>
<script>
export default {
    name: "FirstReduce",
}
</script>

<style lang="less" scoped>
.task-one__item {
    align-items: flex-start;
    .task-one__label {
        padding-top: 6px;
    }
    .task-input {
        margin-right: @margin-xs;
        width: 120px;
    }
}
</style>
